<template>
  <!-- 型号管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="厂商简称">
        <a-select
          v-model:value="filterForm.supplierId"
          class="formInput"
          placeholder="请选择"
          @change="changeSupplierType"
          allow-clear
        >
          <a-select-option
            v-for="item in supplierList"
            :value="item.supplierId"
            :key="item.supplierId"
          >
            {{ item.supplierShortName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="型号">
        <a-select
          v-model:value="filterForm.type"
          class="formInput"
          placeholder="请选择"
          :disabled="!filterForm.supplierId"
          allow-clear
        >
          <a-select-option
            v-for="item in supplierTypeList"
            :value="item.type"
            :key="item.type"
          >
            {{ item.type }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="业务类别">
        <a-select
          v-model:value="filterForm.businessType"
          class="formInput"
          placeholder="请选择"
          allow-clear
        >
          <a-select-option
            v-for="item in BUSINESS_TYPE_LIST"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="handleFilter"
        >查询</a-button
      >
      <a-button type="primary" class="filterBtn greenBtn" @click="handleModel"
        >新增</a-button
      >
    </a-form>
  </div>
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'businessType'">
          {{ BUSINESS_TYPE[record.businessType] }}
        </template>
        <template v-if="column.key === 'handle'">
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmDel(record)"
          >
            <template #title>
              是否确定删除【{{ record.shortName }}】【{{ record.type }}】的记录?
            </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
          <a-button type="link" @click="handleLinkTemplate(record)"
            >关联器部件</a-button
          >
          <a-button type="link" @click="handleLinkProject(record)"
            >关联项目</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getSupplierTypePage"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
  <!-- 新增型号 -->
  <AddModel
    :addModelVisible="addModelVisible"
    :rowData="rowData"
    :isEdit="isEdit"
    @update:addModelVisible="(val) => (addModelVisible = val)"
    @getSupplierTypePage="handleFilter"
  />
  <!-- 关联项目 -->
  <LinkProject
    :linkProjectVisible="linkProjectVisible"
    :rowData="rowData"
    @update:linkProjectVisible="(val) => (linkProjectVisible = val)"
  />
</template>
<script setup>
// 
import { BUSINESS_TYPE, BUSINESS_TYPE_LIST } from "@/constants/stationConfig"
import AddModel from "./conpoments/addModel.vue"
import LinkProject from "./conpoments/linkProject.vue"


const router = useRouter()
const $api = inject("$api")
const filterForm = ref({
  supplierId: null,
  type: null,
  businessType: 0,
  current: 1,
  size: 10,
})
const labelCol = { style: { width: "100px" } }
const total = ref()
const addModelVisible = ref(false)
const linkProjectVisible = ref(false)
const tableData = ref([])
const tableLoading = ref(false)
const rowData = ref({})
const isEdit = ref(false)
const columns = ref([
  {
    title: "厂商简称",
    dataIndex: "shortName",
    key: "shortName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "厂商编码",
    dataIndex: "supplierCode",
    key: "supplierCode",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "设备生产厂家",
    dataIndex: "equipmentManufacturerDesc",
    key: "equipmentManufacturerDesc",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "协议型号",
    dataIndex: "type",
    key: "type",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "单柜容量(kWh)",
    dataIndex: "singleCapacity",
    key: "singleCapacity",
    width: 140,
    resizable: true,
    align: "center",
  },
  {
    title: "单柜额定功率(kW)",
    dataIndex: "singleRatedPower",
    key: "singleRatedPower",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "PACK数量",
    dataIndex: "packNumberPerCluster",
    key: "packNumberPerCluster",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "电芯数量",
    dataIndex: "cellNumberPerPack",
    key: "cellNumberPerPack",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "业务类别",
    dataIndex: "businessType",
    key: "businessType",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "更新时间",
    dataIndex: "updateTime",
    key: "updateTime",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 260,
    resizable: true,
    align: "center",
    fixed: "right",
  },
])
function handleResizeColumn(w, col) {
  col.width = w
}
const handleModel = () => {
  isEdit.value = false
  addModelVisible.value = true
}
const handleLinkProject = (data) => {
  rowData.value = data
  linkProjectVisible.value = true
}
const handleEdit = async (data) => {
  rowData.value = data
  isEdit.value = true
  addModelVisible.value = true
}
const getSupplierTypePage = async () => {
  const params = {
    ...filterForm.value,
  }
  tableLoading.value = true
  const res = await $api.supplierTypePage(params)
  tableLoading.value = false
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
  }
}
const confirmDel = async (data) => {
  const res = await $api.supplierTypeDel(data.id)
  if (res && res.code === 0) {
    message.success("删除成功")
    getSupplierTypePage()
  }
}
const handleLinkTemplate = (data) => {
  router.push({
    path: "/SystemCenter/IOT/TemplateManage",
    query: {
      supplierId: data.supplierId,
      type: data.id,
    },
  })
}
const supplierList = ref([])
const supplierTypeList = ref([])
const getSupplierTypeTree = async () => {
  const res = await $api.supplierTypeTree()
  supplierList.value = res.data
}
const changeSupplierType = (id) => {
  filterForm.value.type = null
  supplierTypeList.value =
    supplierList.value.filter((item) => item.supplierId === id)[0]
      ?.supplierTypeEntities || []
}
const handleFilter = () => {
  filterForm.value.current = 1
  filterForm.value.size = 10
  getSupplierTypePage()
}
onMounted(async () => {
  getSupplierTypePage()
  getSupplierTypeTree()
})
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>
